<template>
	<xh-page-wrapper
		ref="pageList"
		title="绣花申请"
		:request="request"
		:deleteRequest="deleteRequest"
		@clickAdd="handleClickAdd"
		@clickItem="handleClickItem"
		@request="handleRequest"
		:labelWidth="85"
		:operateBtns="{
			key: 'isAssigned',
			values: {
				true: ['detail'],
				false: ['edit', 'detail', 'delete'],
			},
		}"
		:columns="[
			{
				label: '领料人',
				key: 'pickPerson',
				searchOrder: 1,
				search: false,
			},
			{ label: '需求数量', key: 'pickAmount', search: false },
			{
				label: '状态',
				key: 'isAssigned',
				search: false,
				valueMapList: statusOptions,
			},
			{
				label: '可领取数量',
				key: 'balanceAmount',
				search: false,
			},
			{
				label: '可持有数量',
				key: 'totalAmount',
				search: false,
			},
			{
				label: '裁片编号',
				key: 'cuttingCode',
				width: '100%',
				search: true,
				searchOrder: 4,
				valueMapList: cuttingList,
			},
			{
				label: '产品名称',
				key: 'productName',
				search: true,
				width: '100%',
				searchOrder: 2,
				valueMapList: productList,
				searchQueryCode: 'productName',
			},
			{
				label: '辅料名称',
				key: 'accessoriesName',
				search: false,
				width: '100%',
			},
			{
				label: '辅料数量',
				key: 'accessories',
				search: false,
			},
			{
				label: '领料日期',
				key: 'pickDate',
				search: true,
				searchType: 'daterange',
				searchOrder: 1,
			},
		]"
		rowKey="pickPlanId"
	>
		<template #summary>
			<xh-summary-box
				:summaryData="applySummaryData"
				:labelList="[
					{ label: '总需求数量', key: 'pickAmount' },
					{ label: '总可领数量', key: 'balanceAmount' },
				]"
			/>
		</template>
	</xh-page-wrapper>
</template>

<script>
import {
	getPickplanbillList,
	deletePickplanbill,
	getCuttingList,
	getEmbroiderySummary,
	getEmbroideryProductList,
} from '@/api/purchase/pickplanbill.js';
import { formatSelectList } from '@/utils/business.js';
import { ApplyAuditStatusEnum } from '@/utils/constant';
// 导入组件
export default {
	name: 'embroideryApply',
	// mixins: [mixins],
	data() {
		return {
			productList: [],
			cuttingList: [], // 裁片编码list
			request: getPickplanbillList,
			deleteRequest: deletePickplanbill,
			applySummaryData: {},
			statusOptions: ApplyAuditStatusEnum,
		};
	},
	computed: {
		// ...mapGetters(['productList']),
	},
	onShow() {
		this.$refs.pageList?._query();
	},
	created() {
		this.fetchCuttingList();
		this.fetchProductList();
	},
	methods: {
		handleRequest(params) {
			getEmbroiderySummary({ ...params }).then((res) => {
				const { data } = res;
				this.applySummaryData = data || {};
			});
		},
		fetchProductList() {
			getEmbroideryProductList().then((res) => {
				const { rows } = res;
				const newData = Array.from(new Set(rows));
				this.productList = newData.map((value) => ({ text: value, value }));
			});
		},
		handleClickAdd() {
			this.$nav.navigateTo('/subProductionManage/embroideryApply/addForm');
		},
		handleClickItem(item) {
			// eslint-disable-next-line no-unused-vars
			const { params, ...rest } = item;
			const { isAssigned } = item;
			let url = '/subProductionManage/embroideryApply/addForm';
			if (isAssigned) {
				url = '/subProductionManage/embroideryApply/detailPage';
			}
			this.$nav.navigateTo(url, rest, false);
		},
		fetchCuttingList() {
			getCuttingList().then((res) => {
				const { rows } = res;
				this.cuttingList = formatSelectList(rows || [], 'cuttingCode');
			});
		},
	},
};
</script>

<style scoped lang="scss"></style>
